<!--
    @author: crissy-月下闲人
-->

<script lang="ts" setup>
import { ref, watch } from 'vue';
import { ElMessage } from 'element-plus';

function loadConfig() {
    return JSON.parse(localStorage.getItem('config') || '[]');
}

function saveConfig(config: string[]) {

    localStorage.setItem('config', JSON.stringify(config));
    ElMessage({
        type: 'success',
        message: config.toString(),
    });
}

function toClearConfig() {
    if (configArray.value && configArray.value.length > 0) {
        configArray.value = [];
        minNum.value = 0;
        num.value = 0;
        localStorage.removeItem('config');

        ElMessage({
            type: 'success',
            message: '清空配置成功!',
        });
    } else {
        ElMessage({
            type: 'success',
            message: '配置已经为空',
        });
    }
}

let configViewFlag = ref(false);
let loadConfigFlag = ref(false);
let input = ref('');
let configArray = ref(loadConfig() ? loadConfig() : [] as string[]);

console.log(configArray.value);

const message = 'Crissy';
let result = ref(message);

let resultNumber = ref(0);
let checked1 = ref(true);  // 复选框
let resultSet = new Set();
let resultArray = ref([] as string[]);
let num = ref(0)
let minNum = ref(0)
watch(minNum, (newValue, oldValue) => {
    if (newValue > num.value) {
        num.value = newValue
    }
})

function getRandom() {
    if (resultSet.size >= (num.value - minNum.value + 1) && checked1.value)
        return;

    resultNumber.value = minNum.value + Math.floor(Math.random() * (num.value - minNum.value + 1));
    if (resultSet.has(resultNumber.value) && checked1.value) {
        getRandom();
        return;
    }
    resultSet.add(resultNumber.value);
    result.value = configArray.value[resultNumber.value] ? configArray.value[resultNumber.value] : resultNumber.value.toString();
    resultArray.value.push(result.value);
}

function toClear() {
    resultNumber.value = 0;
    result.value = message;
    resultSet.clear();
    resultArray.value = new Array();
}

function toLoadConfig() {
    configArray.value = (loadConfig() && loadConfig().length > 0) ? loadConfig() : [];
    minNum.value = 0;
    num.value = configArray.value.length - 1;
    loadConfigFlag.value = true;
    ElMessage({
        type: 'success',
        message: '加载配置成功!',
    });
}

function toUnloadConfig() {
    configArray.value = [];
    loadConfigFlag.value = false;
    ElMessage({
        type: 'success',
        message: '清空配置成功!',
    });
}

function toAddConfig() {
    if (input.value.trim() === '') {
        ElMessage({
            message: '选项内容不为空！',
            type: 'warning',
        })

        return;
    }
    configArray.value.push(input.value);
    input.value = '';
    saveConfig(configArray.value);
}
</script>

<template>
    <div class=" w-full h-ful">
        <div class=" select-none relative w-full h-[calc(100vh-10rem)] flex justify-center items-center">
            <config-view :class="configViewFlag ? ' w-1/3' : ' w-6'"
                class="h-full absolute right-0 duration-300 bg-slate-100 rounded-l-xl overflow-hidden z-[99]">
                <click-button class="flex w-6 h-full justify-center items-center bg-slate-200 z-[99] ">
                    <svg @click="configViewFlag = !configViewFlag" t="1699804644504"
                        class="icon cursor-pointer fill-[#4FA3FD] hover:fill-[var(--title-color)]" viewBox="0 0 1070 1024"
                        version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4066" width="20" height="20">
                        <path
                            d="M682.216727 1024a35.281455 35.281455 0 0 1-18.618182-7.912727 46.638545 46.638545 0 0 1-12.101818-16.337455l-3.258182-8.378182a19.549091 19.549091 0 0 1-3.258181-4.654545 139.915636 139.915636 0 0 0-35.793455-46.685091 104.448 104.448 0 0 0-134.888727 0c-19.083636 15.080727-33.698909 35.048727-42.356364 57.856a37.748364 37.748364 0 0 1-16.244363 19.083636c-18.757818 7.912727-39.842909 7.912727-58.600728 0a320.791273 320.791273 0 0 1-38.167272-13.498181 185.902545 185.902545 0 0 1-34.397091-19.083637 95.511273 95.511273 0 0 1-20.945455-21.038545 33.652364 33.652364 0 0 1-6.050909-18.152728c-0.465455-10.053818 1.629091-20.014545 6.050909-28.951272 8.238545-18.106182 11.450182-38.074182 9.309091-57.856a100.398545 100.398545 0 0 0-27.927273-59.717818 71.121455 71.121455 0 0 0-37.189818-21.41091 159.557818 159.557818 0 0 0-41.890909-3.723636c-15.825455 0.930909-31.418182 3.909818-46.498909 8.843636a46.405818 46.405818 0 0 1-30.72 0 50.269091 50.269091 0 0 1-22.295273-20.526545 237.661091 237.661091 0 0 1-18.618182-35.002182 219.229091 219.229091 0 0 1-12.567272-39.656727 93.556364 93.556364 0 0 1 0-33.559273 35.002182 35.002182 0 0 1 21.876363-30.813091 154.903273 154.903273 0 0 0 59.112728-43.380363c16.896-18.432 26.344727-42.589091 26.530909-67.630546a96.256 96.256 0 0 0-26.065455-67.165091c-16.337455-18.245818-36.538182-32.581818-59.112727-41.984a30.254545 30.254545 0 0 1-16.290909-15.872 56.087273 56.087273 0 0 1-10.24-27.508363c0.465455-10.891636 2.141091-21.736727 5.12-32.209455a217.367273 217.367273 0 0 1 27.927272-64.372364c5.306182-8.238545 12.288-15.220364 20.48-20.48a22.760727 22.760727 0 0 1 16.756364-4.70109c6.144 0.791273 12.241455 2.234182 18.152727 4.18909 21.643636 8.843636 45.195636 11.729455 68.328728 8.378182 23.738182-3.397818 45.754182-14.336 62.836363-31.232 8.890182-8.843636 15.592727-19.735273 19.549091-31.697454 3.770182-12.334545 6.283636-24.994909 7.447273-37.794909a168.401455 168.401455 0 0 0 0-34.071273c0-9.309091 0-16.756364-2.792727-21.876364a113.105455 113.105455 0 0 1-3.723637-13.591272 23.365818 23.365818 0 0 1 0-16.29091c5.306182-11.636364 14.056727-21.410909 25.088-28.020363 11.450182-7.912727 23.784727-14.429091 36.770909-19.549091 12.520727-4.794182 25.413818-8.517818 38.586182-11.217455 10.379636-2.466909 20.945455-3.909818 31.650909-4.189091a28.811636 28.811636 0 0 1 22.295273 9.309091c5.12 5.538909 9.076364 12.008727 11.636364 19.130182 8.564364 20.48 22.155636 38.446545 39.563636 52.270546 39.330909 29.323636 93.184 29.323636 132.514909 0 19.176727-13.498182 33.792-32.581818 41.890909-54.597819l2.327273-4.654545c3.444364-4.887273 7.354182-9.402182 11.636364-13.498182l3.258181-3.770182c14.848-6.330182 31.650909-6.330182 46.498909 0 12.101818 2.978909 23.924364 7.028364 35.374546 12.101819 11.682909 4.980364 22.667636 11.543273 32.535273 19.595636 9.309091 7.447273 17.361455 16.477091 23.738181 26.624 3.258182 5.771636 4.375273 12.567273 3.258182 19.083636a50.501818 50.501818 0 0 1-5.12 15.872c-9.169455 20.805818-12.101818 43.845818-8.378182 66.234182 3.677091 23.412364 14.754909 45.009455 31.65091 61.579636 17.221818 17.314909 40.261818 27.601455 64.60509 28.951273a142.894545 142.894545 0 0 0 71.214546-12.567273c6.423273-3.816727 13.963636-5.259636 21.364364-4.235636 8.564364 0.279273 16.709818 3.723636 22.807272 9.774546 12.939636 13.312 22.946909 29.184 29.323637 46.68509 8.285091 20.340364 14.056727 41.658182 17.175272 63.441455a38.353455 38.353455 0 0 1-6.050909 28.858182 40.96 40.96 0 0 1-17.221818 14.056727c-22.993455 8.331636-43.147636 23.04-58.135273 42.449455a107.985455 107.985455 0 0 0-25.134545 70.423272c-0.465455 23.365818 6.516364 46.219636 20.014545 65.303273a112.64 112.64 0 0 0 53.061819 40.122182 23.272727 23.272727 0 0 1 10.24 7.447273h2.792727c7.493818 5.957818 13.032727 14.103273 15.778909 23.319272 0.093091 1.396364 0.093091 2.792727 0 4.189091a97.745455 97.745455 0 0 1 0 29.882182c-2.234182 12.939636-5.818182 25.6-10.705455 37.794909-4.840727 12.194909-11.077818 23.738182-18.618181 34.490182a67.025455 67.025455 0 0 1-24.203637 21.922909c-14.475636 7.912727-31.976727 7.912727-46.498909 0a229.236364 229.236364 0 0 0-27.461818-6.050909 131.723636 131.723636 0 0 0-33.466182 0 159.650909 159.650909 0 0 0-33.978182 6.981818 65.582545 65.582545 0 0 0-28.811636 18.664727 108.357818 108.357818 0 0 0-30.72 62.510546c-3.025455 22.900364 0.372364 46.126545 9.774545 67.165091a42.077091 42.077091 0 0 1-3.258181 43.892363 86.574545 86.574545 0 0 1-20.945455 18.152728c-9.914182 6.562909-20.293818 12.334545-31.138909 17.268363a195.444364 195.444364 0 0 1-35.84 12.101819 150.807273 150.807273 0 0 1-31.604364 5.166545z m-378.135272-83.037091l7.912727 6.516364c8.098909 5.771636 16.849455 10.612364 26.065454 14.475636 10.705455 4.561455 21.736727 8.471273 33.000728 11.636364 6.656 2.094545 13.498182 3.351273 20.48 3.723636a179.525818 179.525818 0 0 1 54.411636-72.285091 150.807273 150.807273 0 0 1 194.420364 0c18.944 15.173818 34.722909 33.838545 46.545454 55.063273 2.187636 2.094545 3.956364 4.654545 5.12 7.447273l3.258182 8.843636h12.055273c9.309091-2.187636 18.292364-5.306182 26.996363-9.309091 8.704-3.863273 17.082182-8.378182 25.134546-13.498182l6.981818-4.654545a172.125091 172.125091 0 0 1-13.032727-90.996364 152.669091 152.669091 0 0 1 42.775272-88.622545 111.616 111.616 0 0 1 48.826182-31.232c14.196364-4.701091 28.858182-7.819636 43.752728-9.309091a179.479273 179.479273 0 0 1 46.498909 0c11.636364 1.861818 23.133091 4.468364 34.443636 7.912727h9.262545a22.807273 22.807273 0 0 0 6.981819-7.447273c5.492364-7.866182 10.007273-16.290909 13.498181-25.227636 3.816727-9.309091 6.609455-18.990545 8.378182-28.904727 0.372364-4.189091 0.372364-8.424727 0-12.613818l-3.258182-2.327273A158.673455 158.673455 0 0 1 932.910545 605.090909a155.648 155.648 0 0 1-28.811636-93.277091 153.274182 153.274182 0 0 1 34.443636-97.978182c18.199273-23.412364 42.077091-41.890909 69.306182-53.620363a216.901818 216.901818 0 0 0-13.498182-46.685091 108.311273 108.311273 0 0 0-13.498181-25.6 187.904 187.904 0 0 1-89.786182 14.894545 144.011636 144.011636 0 0 1-92.997818-42.914909 156.392727 156.392727 0 0 1-46.545455-87.226182 165.562182 165.562182 0 0 1 11.170909-90.484363 89.739636 89.739636 0 0 0-29.789091-20.992 161.978182 161.978182 0 0 0-27.880727-9.309091l-13.963636-4.701091a161.373091 161.373091 0 0 1-55.342546 73.216 157.323636 157.323636 0 0 1-190.696727-2.792727 178.641455 178.641455 0 0 1-52.596364-70.423273h-11.636363a204.241455 204.241455 0 0 0-31.138909 9.309091 139.403636 139.403636 0 0 0-27.461819 14.475636l-3.723636 2.792727v6.05091c0 8.843636 2.792727 17.268364 3.723636 27.089454 1.442909 14.242909 1.442909 28.625455 0 42.914909-1.582545 15.825455-4.840727 31.464727-9.774545 46.638546-6.050909 19.549091-16.756364 37.236364-31.138909 51.758545-24.203636 24.064-55.528727 39.563636-89.320727 44.311273a175.336727 175.336727 0 0 1-90.205091-10.24v2.327273a143.825455 143.825455 0 0 0-12.101819 22.388363 170.123636 170.123636 0 0 0-8.843636 26.577455 90.298182 90.298182 0 0 0-3.258182 25.693091A211.176727 211.176727 0 0 1 148.247273 410.530909c24.901818 26.670545 38.725818 61.905455 38.632727 98.443636a146.245818 146.245818 0 0 1-38.167273 97.931637c-19.409455 23.133091-43.752727 41.611636-71.168 54.132363-0.512 4.654545-0.512 9.309091 0 13.963637a175.755636 175.755636 0 0 0 24.669091 58.786909l2.792727 3.723636a198.097455 198.097455 0 0 1 112.081455-6.050909c23.412364 5.12 44.683636 17.361455 60.974545 35.002182a145.687273 145.687273 0 0 1 41.37891 87.691636c2.839273 27.927273-1.815273 56.133818-13.498182 81.640728l-1.861818 5.12zM77.544727 360.261818l-18.618182 13.498182 18.618182-9.774545v-3.723637zM405.922909 25.739636l-17.221818 15.36 3.723636 3.258182 13.498182-18.618182z"
                            p-id="4067"></path>
                        <path
                            d="M543.045818 698.181818a186.181818 186.181818 0 1 1 0-372.363636 186.181818 186.181818 0 0 1 0 372.363636z m0-325.818182a139.636364 139.636364 0 1 0 0 279.272728 139.636364 139.636364 0 0 0 0-279.272728z"
                            p-id="4068"></path>
                    </svg>
                </click-button>
                <div v-if="configViewFlag"
                    class=" w-[calc(100%-1.5rem)] h-full p-2  absolute top-0 right-0 overflow-hidden">
                    <el-input v-model="input" placeholder="添加选项">
                        <template #append>
                            <svg @click="toAddConfig" t="1699805236716"
                                class="icon fill-[#4FA3FD] hover:fill-[var(--title-color)]" viewBox="0 0 1024 1024"
                                version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5503" width="18" height="18">
                                <path
                                    d="M930.133 465.067H554.667V89.6c0-19.115-15.019-34.133-34.134-34.133S486.4 70.485 486.4 89.6v375.467H110.933c-19.114 0-34.133 15.018-34.133 34.133s15.019 34.133 34.133 34.133H486.4V908.8c0 19.115 15.019 34.133 34.133 34.133s34.134-15.018 34.134-34.133V533.333h375.466c19.115 0 34.134-15.018 34.134-34.133s-15.019-34.133-34.134-34.133z"
                                    p-id="5504"></path>
                            </svg>
                        </template>
                    </el-input>
                    <div class=" w-full h-[calc(100%-2rem)] overflow-auto relative">
                        <control-box class=" flex w-full absolute bottom-0">
                            <click-button @click="toClearConfig"
                                class=" flex text-[14px] cursor-pointer justify-center items-center px-2 py-1 rounded-md bg-slate-200 hover:bg-slate-300">
                                清空配置
                            </click-button>
                        </control-box>
                        <span v-for="(item, index) in configArray" :key="index"
                            class=" flex w-full bg-slate-200 rounded-md mt-2 px-2 relative">
                            {{ index }}、{{ item }}
                            <span class=" absolute right-2 bottom-1">
                                <svg @click="configArray.splice(index, 1)" t="1699809945504"
                                    class="icon w-[12px] fill-[#96a6db] hover:fill-[red] cursor-pointer"
                                    viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1736">
                                    <path
                                        d="M817.066667 883.2L140.8 206.933333c-17.066667-17.066667-17.066667-46.933333 0-66.133333 17.066667-17.066667 46.933333-17.066667 66.133333 0l676.266667 676.266667c17.066667 17.066667 17.066667 46.933333 0 66.133333-19.2 17.066667-49.066667 17.066667-66.133333 0z"
                                        p-id="1737"></path>
                                    <path
                                        d="M206.933333 883.2L883.2 206.933333c17.066667-17.066667 17.066667-46.933333 0-66.133333-17.066667-17.066667-46.933333-17.066667-66.133333 0L140.8 817.066667c-17.066667 17.066667-17.066667 46.933333 0 66.133333 19.2 17.066667 49.066667 17.066667 66.133333 0z"
                                        p-id="1738"></path>
                                </svg></span>
                        </span>
                    </div>
                </div>

            </config-view>


            <div>
                <span class=" text-[3rem] text-[var(--title-color)]">{{ result }}</span>
            </div>
            <div class=" block w-full px-4 overflow-auto absolute bottom-4">
                <span
                    class=" inline-block max-w-[7rem] overflow-hidden text-ellipsis whitespace-nowrap hover:whitespace-normal text-[var(--title-color)] px-4 py-[2px] mr-2 rounded-lg bg-slate-200"
                    v-for="(item, index) in resultArray" :key="index">{{ item }}</span>
            </div>
        </div>
        <div class=" select-none w-full relative h-40 bg-slate-200 flex justify-center items-center">
            <div class=" absolute left-[10vw] flex flex-wrap justify-center items-center">
                <span class=" flex w-full">
                    <el-checkbox v-model="checked1" label="不可重复" size="large" />
                </span>
                <span class=" flex items-center w-full">
                    <span class=" text-[0.9rem] mr-2"> 最小值</span>
                    <el-input-number v-model="minNum" :min="0" :max="9999999999" />
                </span>
                <span class=" flex mt-2 items-center w-full">
                    <span class=" text-[0.9rem] mr-2"> 最大值</span>
                    <el-input-number v-model="num" :min="minNum" :max="9999999999" />
                </span>
            </div>
            <div class=" flex justify-center items-center z-[99]">
                <start-button @click="getRandom"
                    class="start-button px-6 py-2 rounded-xl bg-slate-300 flex justify-center items-center">
                    开始
                </start-button>
            </div>
            <div class=" absolute right-[10vw] h-full">
                <ul class=" op-menu">
                    <li>
                        <start-button @click="toClear"
                            class="start-button px-6 py-2 rounded-xl bg-slate-300 flex justify-center items-center">
                            清空
                        </start-button>
                    </li>
                    <li>
                        <start-button @click="toLoadConfig"
                            class="start-button px-6 py-2 rounded-xl bg-slate-300 flex justify-center items-center">

                            加载配置
                        </start-button>
                        <div @click="toUnloadConfig" v-if="loadConfigFlag"
                            class="flex justify-center text-[#67c23a] text-[14px] cursor-pointer mt-1 hover:text-[red]">取消配置
                        </div>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</template>

<style lang="scss" scoped>
.start-button {
    color: var(--title-color);
    user-select: none;

    &:hover {
        transform: scale(97%);
        cursor: pointer;
    }

    &:active {
        transform: scale(95%);
    }
}

.op-menu {
    display: flex;
    flex-wrap: wrap;
    height: 100%;
    align-items: center;

    li {
        width: 100%;
    }
}
</style>